<template>
  <el-dialog
    title="作业批改详情"
    :visible="open"
    width="1200px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @close="cancel()"
  >
    <div class="flex top">
      <div class="item">课程名称:{{ info.courseName }}</div>
      <div class="item" style="margin-left: 20px">
        员工名称:{{ info.studentName }}
      </div>
    </div>
    <div
      v-if="info.operateList && info.operateList.length > 0"
      class="card flex"
      v-for="(item, index) in info.operateList"
      :key="index"
    >
      <div style="font-weight: 600; margin-top: 2px">{{ index + 1 }}.</div>
      <div>
        <div class="flex">
          <div class="item">任务名称:{{ item.chapterName }}</div>
          <div class="item" style="margin-left: 20px">
            步骤名称:{{ item.taskName }}
          </div>
        </div>
        <div class="label">作业实操题题干:</div>
        <div class="value">{{ item.topicContent }}</div>
        <div class="label">答案:</div>
        <div class="value">{{ item.answer }}</div>
        <div class="item" style="margin-top: 10px">
          评价员评分:{{ item.score }}
        </div>
        <div class="label">评价员批注:</div>
        <div class="value">{{ item.teacherRemark }}</div>
      </div>
    </div>
    <div
      v-if="info.operateList && info.operateList.length == 0"
      class="flexcen"
    >
      <el-empty description="暂无数据"></el-empty>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button v-preventReClick @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>
      
<script>
import { homeworkDetail } from "@/api/screen/train";
export default {
  components: {},
  props: {
    open: Boolean,
    courseStuId: [String, Number],
  },
  data() {
    return {
      loading: false,
      info: {},
      total: 10,
    };
  },
  watch: {
    open: {
      handler(newVal) {
        if (newVal) {
          this.getList();
        }
      },
      immediate: true,
    },
  },
  methods: {
    async getList() {
      let res;
      try {
        this.loading = true;
        console.log(this.courseStuId);
        res = await homeworkDetail({ courseStuId: this.courseStuId });
        if (res.code == 200) {
          this.info = res.data;
        }
      } finally {
        this.loading = false;
      }
    },
    // 取消按钮
    cancel() {
      this.$emit("update:open", false);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped lang='scss'>
.top {
  .item {
    font-weight: 600;
  }
}
.card {
  margin-top: 20px;
  .item {
  }
  .label {
    margin-top: 10px;
  }
  .value {
    margin-top: 2px;
  }
}
::v-deep .el-button:focus,
.el-button:hover {
  color: #ff6801;
  border-color: #ff6801;
  background-color: rgba($color: #ff6801, $alpha: 0.3);
}
</style>
      